<template>
	<view class="container">
		<!-- 新闻列表 -->
		<view class="item" @tap="onNewsClick" :data-index="index" v-for="(item, index) in news" :key="index">
			<!-- 图片 -->

			<view style="width: 280rpx; height: 180rpx">
				<!-- <image style="width: 280rpx;height: 180rpx;" src='{{item.image}}' mode="aspectFill" data-index='{{index}}' binderror="onNewsImgErr"></image> -->
				<image-loader style="margin-left: 10rpx" default-image="/assets/img_err.jpg" mode="aspectFill" :original-image="item.image" width="280rpx" height="180rpx" />
			</view>

			<!-- 标题和时间 -->

			<view style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin-left: 20rpx">
				<view class="item_name">{{ item.title }}</view>
				<!-- 时间图标和时间文本 -->
				<view style="display: flex; align-items: center">
					<image class="item_desc_ic" src="/static/assets/time_ic.png"></image>
					<view class="item_desc">{{ item.createtime }}</view>
				</view>
			</view>
		</view>

		<view v-if="!news || news.length <= 0" style="margin: 300rpx auto; color: #cccccc">暂无数据~</view>
	</view>
</template>

<script>
	import imageLoader from '@/component/image-loader/image-loader'

	const app = getApp() // 获取应用实例
	const util = require('../../../utils/util')
	import { getNewsList } from '../../../utils/http/api'
	export default {
		components: { imageLoader },
		// 生命周期函数--监听页面加载
		data() {
			return {
				// 数据格式 { id: '', title:'' , image: '', createtime: '',}
				news: []
			}
		},
		onLoad(options) {
			this.reqBizzList()
		},
		// 页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh() {
			this.reqBizzList()
		},
		methods: {
			// 请求获取通知公告、招商
			async reqBizzList() {
				uni.showLoading({ title: '处理中', mask: true })
				// is_home 1 首页显示 0 首页不显示; type为1时传0或不传 type 0 公告 1 招商
				let { code, msg, data } = await getNewsList({ page: '1', limit: '999999', is_home: '0', type: '1' })
				uni.stopPullDownRefresh();
				if (code == '1') {
					this.setData({ news: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
			},

			// onNewsClick
			onNewsClick(e) {
				let index = e.currentTarget.dataset.index
				let id = this.news[index].id
				util.navigateTo('/pages/sys/web_detail/web_detail?id=' + id)
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 200rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-color: #f0f0f0;
		border-style: solid;
		border-radius: 10rpx;
		border-width: 0rpx;
		/* 第一个值：设置水平方向阴影偏移量。第二个值：设置垂直方向阴影偏移量。第三个值：设置对象的阴影模糊值。不允许为负值.
  第四个值：设置对象的阴影外延值，不允许为负值.第五个值：color。 */
		box-shadow: 0rpx 0rpx 3rpx 3rpx #f0f0f0;
	}

	.item_name {
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-right: 10rpx;
		max-lines: 1;

		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item_desc {
		font-size: 24rpx;
		color: #cacaca;
		margin: 0 0 10rpx 6rpx;
	}

	.item_desc_ic {
		width: 24rpx;
		height: 24rpx;
		margin: 0 0 8rpx 0rpx;
	}
</style>